<template>
	<view class="body">
		<view class="contet">
			<view class="items">
				<view class="left">收件人</view>
				<input class="ipt" type="text" v-model="info.name" />
			</view>
			<view class="items">
				<view class="left">电话号码</view>
				<input class="ipt" type="text" v-model="info.phoneNumber" />
			</view>
			<view class="items">
				<view class="left">所属地区</view>
				<view class="ipt" @tap="select">{{info.province}}-{{info.city}}-{{info.region}}</view>
				<simple-address ref="simpleAddress" @onConfirm="confirm"></simple-address>
			</view>
			<view class="items">
				<view class="left">详细地址</view>
				<input class="ipt" type="text" v-model="info.detailAddress" />
			</view>
			<view class="items">
				<view class="left">设置为默认地址</view>
				<switch @change="switchChange" />
			</view>
			<view class="items-last">
				<view class="del" @tap="del">删除收货地址</view>
			</view>
		</view>

		<view class="save">
			<view class="btn-save" @tap="save">保存地址</view>
		</view>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import {
		findAllAddress,
		updateAddressInfo,
		switchDefault,
		delAddressInfo
	} from "../../../api/address/index.js"
	export default {
		data() {
			return {
				info: [],
				defaultStatus: ''

			};
		},
		onLoad(options) {
			findAllAddress().then(res => {
				console.log(res)
				var ids = options.addressId
				var list = res.data.items;
				this.info = (list.filter(ele => ele.id == ids))[0]
				console.log(this.info)
			})
		},
		methods: {
			select() {
				this.$refs.simpleAddress.open()
			},
			confirm(e) {
				console.log(e)
				this.info.province = e.labelArr[0]
				this.info.city = e.labelArr[1]
				this.info.region = e.labelArr[2]
			},
			switchChange(e) {
				var _this = this
				console.log(e.target.value)
				if (e.target.value == false) {
					this.defaultStatus = 0
				} else {
					this.defaultStatus = 1
				}
				this.info.defaultStatus = this.defaultStatus
				switchDefault(this.info.id, this.defaultStatus).then()
			},
			del() {
				var _this = this
				uni.showModal({
					content: '确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							delAddressInfo(_this.info.id).then()
						} else if (res.cancel) {

						}
					}
				})

			},
			save() {
				updateAddressInfo(this.info).then(res => {
					console.log(res)
					if (res.success == true) {
						uni.showToast({
							title: "更新成功",
							duration: 1000
						})
						setTimeout(function() {
							uni.navigateTo({
								url: "../address"
							})
						}, 1000)
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		height: 100vh;
		background-color: #F1ECE7;

		.items {
			width: 94%;
			margin: 0 3%;
			border-bottom: 1Px solid #ccc;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 30%;
				height: 60px;
				line-height: 60px;
				font-weight: 200;
				font-size: 15px;
			}

			.ipt {
				width: 70%;
				padding: 10px 0;
				font-size: 15px;
			}
		}

		.items-last {
			width: 94%;
			margin: 0 3%;

			.del {
				width: 100%;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 18px;
				margin-top: 30px;
				color: #fff;
				background-color: #e64340;
				border-bottom: 0.5px solid #eee;
			}
		}

		.save {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn-save {
				width: 70%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border-radius: 40px;
				font-size: 15px;
				color: #fff;
				background-color: #354e44;
				box-shadow: 0px 2px 5px rgba(0, 0, 0, .4);
			}
		}
	}
</style>
